<template>
	<div class="container-wrapper">
		<div class="start_ba">
			<div :class="headIos?'title-ios':''" class="title">
				<a href="javascript:;" @click="$router.go(-1)" class="go-back">
			      <i></i>
			    </a>
			    <h1 >背景调查</h1>
			</div>
			<div class="search_infos">
				<div class="info_bg info_mar">
					<i class="info_bgi"></i>
					<span>调查对象信息</span>
				</div>
				<div class="border-ran">
					<div class="form-group">
						<span class="form-label">姓名</span>
						<div class="form-input">
							<input readonly type="text" class="m-text _input" v-model="oName" placeholder="请输入姓名">
						</div>
					</div>
					<div class="form-group">
						<span class="form-label">身份证</span>
						<div class="form-input">
							<input type="text" class="m-text _input" v-model="oCard" placeholder="请输入身份证">
						</div>
					</div>
					<div class="form-group">
						<span class="form-label">手机号码</span>
						<div class="form-input">
							<input readonly type="text" class="m-text _input" v-model="oMobile" placeholder="请输入手机号码">
						</div>
					</div>
				</div>
				<div class="search_item">如上述信息填写有误，造成无法生成报告的资费需自行承担。</div>
			</div>
		</div>
	    <div class="select_normal_nes item-selected">
    		<div class="page_price">
    			<div class="pageversion">基础包</div>
    			<div class="pageblank"></div>
    			<div class="pageprice">￥{{goodsPrice}}</div>
    		</div>
    		<div class="basicpage">
    			<div class="basicitem">
    				<div class="shenfen"></div>
    				<div class="shenfen_text">身份认证</div>
    			</div>
    			<div class="basicitem">
    				<div class="telephone"></div>
    				<div class="shenfen_text">手机验证</div>
    			</div>
    			<div class="basicitem">
    				<div class="crime"></div>
    				<div class="shenfen_text">犯罪记录</div>
    			</div>
    			<div class="basicitem">
    				<div class="remark"></div>
    				<div class="shenfen_text">职说评价</div>
    			</div>
    		</div>
    	</div>
	   	<div class="already_ready">
	   		<div class="agree_telephone_text">工作履历背景调查致电 &nbsp;<a class="agree_telephone_num" href="tel:400-832-5966">400-832-5966</a></div>
				<check-icon :value.sync="isRemind">我已阅读
					<span @click.stop.prevent="showRelief" style="color:#F89721;">《萝卜猎手背景调查免责声明》</span>
				</check-icon>
			</div>
			<div class="already_readybottom"></div>
	   	<button :disabled="gobug" @click="_gobuy" class="go_buy">免费背调</button>
	   	<boxconfirm content_title="尚未阅读萝卜猎手免责声明" content_confirm="确定" content_cancel="取消" ref="boxconfirm"></boxconfirm>
	   	<boxconfirm content_title="自我背调失败" content_confirm="确定" content_cancel="取消" ref="bboxconfirm"></boxconfirm>
	   	<boxconfirm content_title="网络异常，请重新选择。" content_confirm="确定" content_cancel="取消" @confirmClick="queding" ref="qboxconfirm"></boxconfirm>
			<alertbox content_img="/static/img/user_phone.png" content_l="自我背调成功" ref="alertbox" @sunccessClick="goarchivecenter"></alertbox>
			<toast v-model="showPositionValue" type="text" width="100%" :time="1800" is-show-mask text="请输入正确的身份证号码。" position="bottom"></toast>
	</div>
</template>

<script>
	import {Toast,Checker, CheckIcon, CheckerItem, Divider, Group, Cell, Popup, TransferDom,Panel } from 'vux';
	import pageprice from '../common/pageprice';
	import util from '../../libs/util';
	import alertbox from '../common/alertbox';
	import boxconfirm from '../common/boxconfirm';
	export default {
		components:{
			Checker,
		    CheckerItem,
		    Divider,
		    Group,
		    Cell,
		    Popup,
		    Panel,
		    pageprice,
		    boxconfirm,
				alertbox,
				Toast,
				CheckIcon
		},
		data () {
		    return {
		    	series:true,
		    	chooseid:[],
		    	sourceType:'SMSNOTICE',
		    	oName:'',
		    	oMobile:'',
		    	oCard:'',
		    	goodsPrice:'',
		    	id:'',
					gobug:false,
					showPositionValue:false,
					headIos:false,
					isRemind:true
			}
		},
		methods:{
			axIos(){
				var that = this;
				var url = '/lblsapp-h5/v2/report/saveReqCreditReportForSelf.json';
				util.ajax.post(url).then(function(data){
					// console.log(data)
					var datas = data.data.res.data.goodsInfoLlist[0];
					// console.log(datas)
					if(data.data.code==='0'){
						that.goodsPrice=datas.goodsPrice;
						that.id = datas.id;
					}else{
						that.$refs.qboxconfirm.show();
					}
					
				}).catch(function(error){
						console.log(error);
						that.$refs.qboxconfirm.show();
				})
			},
			showRelief: function() {
				this.$router.push({ path: '/relief' })
			},
			_gobuy(){
				var that = this;
				that.gobug=true;
				var regidC = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
				var isIdcard = regidC.test(that.oCard);
				if(!isIdcard){
					that.showPositionValue = true;
					that.gobug = false;
					return;
				};
				if(this.isRemind){
					var url = '/lblsapp-h5/v2/report/reportSelfsub.json';
					let data = {goodsList:that.id}
					util.ajax.post(url,data).then(function(data){
						// console.log(data)
						if(data.data.code==='0'){
								that.$refs.alertbox.show();
						}else{
								that.$refs.bboxconfirm.show();
								that.gobug = false;
							
						}					
					}).catch(function(error){
						console.log(error)
						that.$refs.qboxconfirm.show();
						that.gobug=false;
					})
				}else{
					that.$refs.boxconfirm.show();
					that.gobug = false;
				}
			},
			queding(){
				this.axIos();
			},
		
			goarchivecenter(){
				this.$router.push({ path: '/archivecenter' });
			}
		},
		created(){
			if (window.navigator.userAgent.indexOf('LBLSIOS') > -1) {
				this.headIos = true
			} else {
				this.headIos = false
			};
			this.oName=this.$route.query.name;
			this.oCard=this.$route.query.idCard;
			this.oMobile=this.$route.query.mobile;
			if(this.$route.query.sourceType){
				this.sourceType = this.$route.query.sourceType;
			}
			this.axIos();
		},
	}
</script>

<style scoped>
	.container-wrapper{
		background: rgb(245,245,245);
	}
	.title{
	    width: 100%;
	    height: 45px;
    	line-height: 45px;
	}
	.title-ios{
		padding-top: 20px;
	}
	.title .go-back{
	    float: left;
	    width: 14.06%;
	    height: 45px;
	    font-size: 14px;
	    color: #212121;
	}
	.title .go-back i{
	    display: block;
	    width: 16px;
	    height: 16px;
	    margin-top: 15px;
	    margin-left: 15px;
	    background-image: url(../../assets/img/reference/jiantoul.png);
	    background-repeat: no-repeat;
	    background-size: contain;
	}
	.title h1{
		margin-left: 14.06%;
	    margin-right: 14.06%;
	    font-size: 18px;
	    text-align: center;
	    margin-bottom: 0;
	    margin-top: 0;
	    font-weight: normal;
	    color: #ffffff;
	}
	.choose-type{
		line-height: 20px;
		font-size: 1.6rem;
		color: #212121;
	}
	.start_ba{
		width: 100%;
		height: auto;
		background: url(../../assets/img/reference/start_bg.png) no-repeat top left;
		background-size: cover;
	}
	.search_infos{
		padding: 0px 4.3% 0px 3.7%;
	}
	.search_info{
		padding: 15px 4.3% 20px 3.7%;
	}
	.info_bg .info_bgi{
		width: 16px;
		height: 16px;
		background: url(../../assets/img/reference/info_bgi.png) no-repeat;
		background-size: 16px 16px;
		background-size: contain;
		float: left;
		margin-right: 3px;
	}
	.info_bg span{
		display: block;
		height: 16px;
		line-height: 16px;
		color: #ffffff;
		font-size: 1.4rem;
	}
	.info_mar{
		margin: 20px 0 18px 0;
	}
	.form-group {
	    height: 44px;
	    position: relative;
	    line-height: 44px;
	    border-bottom: 1px solid #eee;
	    display: flex;
	}
	.form-label {
	    font-size: 0.14rem;
	    background: #ffffff;
	    padding-left: 20px;
	    font-size: 1.4rem;
		color: #808080;
	}
	.form-group .form-input {
		flex: 1;
	    font-size: 0;
	    line-height: 44px;
	    border-radius: 0;
	}
	.form-group .form-input .m-text{
		text-align: right;
		margin: 0;
		padding-right: 20px;
		background: #ffffff;
	}
	.search_item{
		height: 42px;
		line-height: 42px;
		font-size: 1rem;
		color: #FFFFFF;
	}
	.info_m{
		color: #808080 !important;
	}
	/*修改Checker 属性*/
	.select_normal{
		padding: 11px 20px 17px 24px;
	}
	.select_normal_nes{
		position: relative;
		margin: 15px 4% 0;
    padding: 11px 20px 17px 24px;
    background: #F89721;
    border-radius: 4px;
	}
	.page_price{
		display: flex;
	}
	.page_price_bottom{
		padding-bottom: 14px;
	}
	.pageversion{
		flex: 0 0 auto;
		height: 20px;
		line-height: 20px;
		font-size: 1.4rem;
		color: #808080;
	}
	.pageblank{
		flex: 1;
	}
	.pageprice{
		position: absolute;
		top: 11px;
		right: 20px;
		height: 20px;
		line-height: 20px;
		font-size: 1.6rem;
		color: #FFFFFF;
	}
	.basicpage{
		width: 100%;
		display: flex;
	}
	.basicitem{
		flex: 0 0 26%;
		height: 78px;
		padding-top: 23px;
		padding-right: 4%;
		box-sizing: border-box;
	}
	.basicitem:nth-child(4n){
		flex: 1;
		padding-right: 0;
	}
	.shenfen{
		height: 23px;
		background: url(../../assets/img/reference/shenfen.png)no-repeat;
		background-size: contain;
		background-position: center;
		margin-bottom: 13px;
	}
	.shenfen_text{
		font-size: 1.4rem;
		color: #FFFFFF;
		height: 20px;
		line-height: 20px;
		text-align: center;
	}
	@media screen and (max-width: 330px) {
	    .shenfen_text {
	        font-size: 1.2rem;
	    }
	}
	.telephone{
		height: 29px;
		background: url(../../assets/img/reference/telephone.png)no-repeat;
		background-size: contain;
		background-position: center;
		margin-bottom: 7px;
	}
	.crime{
		height: 31px;
		margin-bottom: 5px;
		background: url(../../assets/img/reference/crime.png)no-repeat;
		background-position: center;
		background-size: contain;
	}
	.remark{
		height: 31px;
		margin-bottom: 5px;
		background: url(../../assets/img/reference/remark.png)no-repeat;
		background-position: center;
		background-size: contain;
	}
	.already_ready{
		width: 100%;
		height: 91px;
		margin-top: 20px;
		background: rgb(240,240,240);
		padding: 15px 4.3% 25px 3.7%;
		box-sizing: border-box;
	}
	.agree_ready{
	    display: inline;
	    width: 17px;
	    height: 17px;
	    line-height: 17px;
	    margin: 0;
	    font-size: 0;
	    vertical-align: text-bottom;
	    background: none;
	}
	.agree_ment{
	    text-align: center;
    	font-size: 12px;
    	color: #212121;
	}
	.agree_telephone_text{
		margin-bottom: 17px;
		font-size: 1.2rem;
		color: #808080;
	}
	.go_buy{
		display: block;
		width: 100%;
		text-align: center;
		height: 50px;
		line-height: 50px;
		background: #F89721;
		color: #FFFFFF;
		font-size: 1.4rem;
		position: fixed;
		bottom: 0;
		left: 0;
		border: none;
	}
	.item-selected .pageversion{
		color: #ffffff !important;
	}
	.border-ran{
		border: 1px solid #ffffff;
    border-radius: 4px;
	}
	.already_readybottom {
		width: 100%;
		height: 50px;
	}

</style>